<template>
  <div>
    <a-card class="w-full">
      <div class="flex justify-between">
        <div>
          <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
            <a-form-item name="zjm">
              <a-input-search v-model:value="formState.zjm" class="w-80" placeholder="姓名/助记码/床位号" @search="getData()" />
            </a-form-item>
            <a-form-item label="病区" class="ml-5 w-[260px]">
              <!-- <SelectArea v-model:value="formState.wardId" class="w-[280px]" use-cache set-cache @change="getData" /> -->
              <a-select
                v-model:value="formState.wardId"
                :options="wardList"
                placeholder="请选择"
                :field-names="{ label: 'wardName', value: 'id' }"
                @change="onChangeWard"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="flex items-center">
          <a-radio-group v-model:value="isCardView" class="mr-5" @change="onChangeActive">
            <a-tooltip title="列表模式" placement="bottom">
              <a-radio-button :value="true"><BarsOutlined /></a-radio-button>
            </a-tooltip>
            <a-tooltip title="卡片模式" placement="bottom">
              <a-radio-button :value="false"><AppstoreOutlined /></a-radio-button>
            </a-tooltip>
          </a-radio-group>
          <BaseExport type="防疫防护" name="隔离登记" code="000657" :search-params="formState">导出</BaseExport>
        </div>
      </div>
    </a-card>
    <a-card class="mt-2 h-full" style="height: calc(100vh - 135px)">
      <BaseTable v-if="isCardView" fill :data-source="tableData" :loading="loading" column-code="000657" :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'bedStatus'">
            <a-tag v-if="record.bedStatus === 0" color="blue">正常</a-tag>
            <a-tag v-if="record.bedStatus === 1" color="green">隔离</a-tag>
            <a-tag v-if="record.bedStatus === 2" color="red">停用</a-tag>
          </template>

          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a-button type="link" size="small" :disabled="record.bedStatus === 1 || wardItem.wardTypeCode !== 'QYLB008'" @click="onEditOpen(record)"
                >登记</a-button
              >
              <a-button type="link" size="small" :disabled="record.bedStatus !== 1" @click="onSecureOpen(record)">解除</a-button>
              <!-- <BaseButton confirm-text="是否删除?" type="text" danger size="small" @click="onConfirm(record, 2)"> 删除 </BaseButton> -->
            </a-space>
          </template>
        </template>
      </BaseTable>
      <!-- 卡片 -->
      <div v-else class="flex-1 overflow-y-auto">
        <div v-if="tableData.length">
          <div class="w-full flex flex-wrap content-start">
            <template v-for="(item, index) in tableData" :key="index">
              <a-dropdown v-if="item.brName" class="h-fit" trigger="contextmenu">
                <PatientListCardCustom
                  class="m-2"
                  :data="item"
                  show-footer
                  :active="item.isolateId === rowData.isolateId"
                  @click="onRightClick(item)"
                  @change-condition="onChangeCondition($event, item)"
                />
                <!-- 右键菜单 -->
                <template #overlay>
                  <a-menu v-if="item.bedStatus === 1">
                    <a-menu-item v-for="menu in rightKeyMenus" :key="menu.name" @click="menu.action(item)">{{ menu.name }}</a-menu-item>
                  </a-menu>
                  <a-menu v-else>
                    <a-menu-item @click="onClickAction">隔离登记</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
              <a-dropdown v-else class="h-fit" trigger="contextmenu">
                <BedCardEmpty class="m-2" :bedCode="item.bedCode" />
                <!-- 右键菜单 -->
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="onEditOpen(item)">隔离登记</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </div>
        </div>
        <div v-else class="w-full h-full flex-center">
          <a-empty />
        </div>
      </div>
    </a-card>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="getData" />
    <SecureRegister v-model:open="secureOpen" :row-data="rowData" @success="getData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue'
// import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
// import BaseButton from '@/components/BaseButton'
import Edit from '@/components/LsolationRegistration'
import PatientListCardCustom from './components/PatientCard'
import BedCardEmpty from './components/BedCardEmpty'
import SecureRegister from './components/SecureRegister'

const isCardView = ref(true) //true list  false card
const editOpen = ref(false)
const secureOpen = ref(false)
const rowData = ref({})
const formRef = ref(null)
const wardList = ref([])
const wardItem = ref({})
const rightKeyMenus = ref([
  {
    name: '解除隔离',
    action: (row) => {
      onSecureOpen(row)
    }
  }
  // {
  //   name: '删除登记'
  // }
])

const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})

// 获取病区
const getWardData = async () => {
  const { code, msg, data } = await post('/operation/opex/getWardInfoList', {})
  if (code !== 0) return message.error(msg)
  wardList.value = data
}

const onChangeWard = (id) => {
  wardItem.value = wardList.value.filter((i) => i.id === id)[0]
  getData()
}

// 切换列表和卡片
const onChangeActive = (val) => {
  isCardView.value = val.target.value
}

const { loading, pagination, getData, tableData } = useTable({
  url: '/war/epidemicPrevention/getEpidemicIsolateResponseList',
  immediate: true,
  formatParams: () => {
    return {
      ...formState.value,
      startDate: formState.value.dateRange?.[0],
      endDate: formState.value.dateRange?.[1]
    }
  }
})

// 登记
const onEditOpen = (record = {}) => {
  rowData.value = { ...record }
  editOpen.value = true
}

// 解除
const onSecureOpen = (record = {}) => {
  rowData.value = { ...record }
  secureOpen.value = true
}

// 确认和作废
// const onConfirm = async (record, status) => {
//   const res = await post('/bloodm/bldStoreInRecord/doDelBldStoreInRecord', { lsh: record.lsh, status })
//   if (res.code !== 0) return message.error(res.msg)
//   message.success(res.msg)
//   getData()
// }

const onRightClick = (row) => {
  rowData.value = { ...row }
}

onMounted(() => {
  getWardData()
})
</script>
